<template>
    <div>
        <img src="../png/1.png" style="z-index: 0;width: 100vw;height: 100vh;position: absolute;top: 0;left: 0;" alt="">
        <!-- <div class="zhuce bx" style="z-index: 0;"> -->

        <div id="login_box" style="z-index: 1;position: relative;margin-top: 12%;">
            <h2 id="login">注册</h2>
            <div id="input_box">
                <input class="i" v-model="form.nick" type="text" placeholder="请输入昵称" />
            </div>
            <div class="input_box">
                <input class="i" v-model="form.username" type="text" placeholder="请输入用户名" />
            </div>
            <div class="input_box">
                <input class="i" v-model="form.password" type="password" show-password placeholder="请输入密码" />
            </div>
            <div class="input_box">
                <input class="i" v-model="form.qpassword" type="password" show-password placeholder="确认密码" />
            </div>
            <!-- <el-checkbox v-model="checked"
                style="margin-left: 60px;margin-top: 50px;color: #000;">同意协议并注册《知晓用户协议》</el-checkbox> -->
            <button class="b" @click="add" style="margin-top: 15px;">注册</button>
        </div>



        <!-- <div class="main">
                <div class="top">
                    <h4>注册新用户</h4>
                    <h5>我有账号，去<a @click="toZhuce" class="font-red">登陆</a></h5>
                </div>
                <div class="buttom">
                    <div class="ul-ol">
                        <ul>
                            <li class="li123">
                                昵称：<input style="padding: 10px;" v-model="form.nick" type="text" />
                            </li>
                            <li class="li123">
                                用户名：<input style="padding: 10px;" v-model="form.username" type="text" />
                            </li>
                            <li class="li123">
                                登录密码：<input style="padding: 10px;" v-model="form.password" type="password" />
                            </li>
                            <li class="li5">
                                确认密码：<input style="padding: 10px;" v-model="form.qpassword" type="password" />
                            </li>

                            <el-checkbox v-model="checked"
                                style="margin-left: 60px;margin-top: 50px;color: #000;">同意协议并注册《知晓用户协议》</el-checkbox>
                            <button @click="add">完成注册</button>
                        </ul>
                    </div>
                </div>
            </div> -->



        <!-- </div> -->
    </div>
</template>

<script>
import axios from 'axios'
import '../style/chushihua.css'
import '../style/zhuce.css'
import '../style/public.css'
export default {
    data() {
        return {
            form: {
                nick: '',
                username: '',
                password: '',
                qpassword: ''
            },
            checked: false
        }
    },
    mounted() {

    },
    methods: {
        add() {
            if (this.form.nick == '' || this.form.username == '' || this.form.password == '' || this.form.qpassword == '') {
                this.$message({
                    message: '请将表单填写完整!',
                    type: 'warning'
                });
            }
            //  else if (this.checked == false) {
            //     this.$message({
            //         message: '请勾选同意协议!',
            //         type: 'warning'
            //     });
            // } 
            else if (this.form.password != this.form.qpassword) {
                this.$message({
                    message: '两次输入密码不一致!',
                    type: 'warning'
                });
            } else {
                this.$message({
                    message: '注册成功!',
                    type: 'success'
                });
                axios.post("http://localhost/add2", this.form).then((res) => {
                    console.log(res);
                })
                this.$router.push("/login")
            }
        },
        toZhuce() {
            this.$router.push("/login")
        },
    },
}
</script>

<style>
body {
    background: #fff;
}

#login_box {
    width: 25%;
    height: 370px;
    background-color: #00000090;
    margin: auto;
    margin-top: 5%;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
}

#login {
    color: #ffffff90;
    margin-top: 5%;
}

#input-box {
    margin-top: 5%;
}

span {
    color: #fff;
}

.i {
    border: 0;
    width: 90%;
    font-size: 15px;
    color: #fff;
    background: transparent;
    border-bottom: 2px solid #fff;
    padding: 5px 10px;
    outline: none;
    margin-top: 10px;
}

.i::placeholder {
    color: #ccc;
}

.b {
    margin-top: 50px;
    width: 60%;
    height: 30px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
    margin-top: 45%;
    margin-left: 60%;
}

.a {
    color: #b94648;
}
</style>